<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../assets/ico/favicon.ico">

    <title>Blog Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="blog.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <div class="container-fluid mypage " id="blog"> 
    <div class="row">
        <dl class="breadcrumb">
            
            <span class="home"></span>홈<span class="cursor"></span><strong>마이페이지</strong>
        </dl>
    </div>   
    
    <div class="row row-offcanvas row-offcanvas-left">
        <div id="left" class="col-sm-4 col-md-3 blog-sidebar sidebar-offcanvas">
            <div id="pointer">
                <img src="img/mypage/icon_pointer.png" />
            </div><!--end pointer -->
            <div id="link">
                <a href="mypage_premium_shop.htm" id="link1"><img src="img/mypage/banner2.png" alt="" /></a>
                <a href="mypage_mileage_shop.htm" id="link2"><img src="img/mypage/banner1.png" alt="" /></a>
            </div>  
            <div id="menu" class="conner5">
                      
                <div id="first">
                <p class="title">마이 쇼핑정보</p>
                <ul>
                    <li><a href="mypage_order.htm">주문/배송 조회</a></li>
                    <li><a href="mypage_change.htm">주문정보 변경</a></li>
                    <li><a href="mypage_cancel.htm">주문 취소</a></li>                
                    <li><a href="mypage_return.htm">반품/환불</a></li> 
                    <li><a href="mypage_receipt.htm">영수증 신청/발급</a></li>
                    <li><a href="mypage_service.htm">내가 신청한 서비스</a></li>
                     
                </ul>
                </div>
                <div id="second">
                <p class="title">참좋은 혜택</p>
                <ul>
                    <li><a href="mypage_coupon.htm">내 쿠폰함</a></li>
                    <li><a href="mypage_point.htm">포인트 내역</a> </li>
                    <li><a href="mypage_bemoney.htm">예치금 관리</a></li>
                    <li><a href="mypage_giftcard.htm">기프트카드 </a></li> 
                    <li><a href="mypage_event.htm">이벤트 당첨확인 </a></li>
                      
                </ul>
                </div>
                
                <div id="third">
                <p class="title">마이 위쉬리스트</p>
                 <ul>
                    <li><a href="mypage_wishlist.htm">찜한 상품</a></li>
                    <li><a href="mypage_brand.htm">관심 브랜드</a></li>
                    <li><a href="mypage_review.htm">관심리뷰</a></li>
                   
                </ul>
                </div>
                
                <div id="fourth">
                <p class="title">마이 글모음</p>
                <ul>
                    <li><a href="mypage_ripple.htm">상품 리뷰</a></li>
                    <li class="active"><a href="mypage_answer.htm">1:1상담</a></li>
                    <li><a href="mypage_question.htm">상품 문의/신고 내역</a></li>
                   
                </ul>
                </div>
                
                <div id="fifth">
                <p class="title">마이정보</p>
                <ul>
                    <li><a href="mypage_info_modify.htm"> 회원 정보 수정</a></li>
                    <li><a href="mypage_info_address.htm">나의 주소록</a></li>
                    <li><a href="mypage_info_aniversary.htm">나의 기념일</a></li>
                    <li><a href="mypage_info_grade.htm">회원 등급 확인</a></li> 
                    <li><a href="mypage_info_member.htm">회원탈퇴</a></li>               
                </ul>
                </div>
        </div><!--end #menu -->
        <div id="yellow_background" class="conner3">
        </div>
    </div><!--end #left -->
       
        <div class="col-sm-8 col-md-9 blog-main" id="right">
            <div class="row" id="banner_top">
                <div class="col-lg-8 " id="banner_top_left">
                     <h3 class="blog-title">The Bootstrap Blog</h3>
                        <p class="lead blog-description"> 
                
                    The official example template of creating a blog with Bootstrap.</p>
                </div>
                <div class="col-lg-4 " id="banner_top_right">
                     <h3 class="blog-title">The Bootstrap Blog</h3>
                        <p class="lead blog-description"> 
                
                    The official example template of creating a blog with Bootstrap.</p>
                </div>
            </div><!--end banner-top -->
            
            <div class="bs-example-tabs" id="tab">
                <ul id="myTab" class="nav nav-tabs ">
                  <li class="active col-xs-4 text-center"><a href="#home" data-toggle="tab">TAB1</a></li>
                  <li class="col-xs-4 text-center"><a href="#profile" data-toggle="tab">TAB2</a></li>
                  <li class="col-xs-4 text-center"><a href="#dropdown1" data-toggle="tab">TAB3</a>                  </li>
                </ul>
                <div id="myTabContent" class="row tab-content">
                  <div class="tab-pane fade active in table-responsive" id="home">                   
                        <table class="table">
                          <thead>
                            <tr>
                              <th>#</th>
                              <th>First Name</th>
                              <th>Last Name</th>
                              <th>Username</th>
                              <th>First Name</th>
                              <th>Last Name</th>
                              <th>Username</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>1</td>
                              <td>Mark</td>
                              <td>Otto</td>
                              <td>@mdo</td>
                              <td>Mark</td>
                              <td>Otto</td>
                              <td>@mdo</td>
                            </tr>
                            <tr>
                              <td>2</td>
                              <td>Jacob</td>
                              <td>Thornton</td>
                              <td>@fat</td>
                              <td>Mark</td>
                              <td>Otto</td>
                              <td>@mdo</td>
                            </tr>
                            <tr>
                              <td>3</td>
                              <td>Larry</td>
                              <td>the Bird</td>
                              <td>@twitter</td>
                              <td>Mark</td>
                              <td>Otto</td>
                              <td>@mdo</td>
                            </tr>
                          </tbody>
                        </table>
              
                    
                  </div>
                  <div class="tab-pane fade col-sm-12" id="profile">
                   <table class="table">
                          <thead>
                            <tr>
                              <th>#</th>
                              <th>First Name2</th>
                              <th>Last Name2</th>
                              <th>Username2</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>1</td>
                              <td>Mark</td>
                              <td>Otto</td>
                              <td>@mdo</td>
                            </tr>
                            <tr>
                              <td>2</td>
                              <td>Jacob</td>
                              <td>Thornton</td>
                              <td>@fat</td>
                            </tr>
                            <tr>
                              <td>3</td>
                              <td>Larry</td>
                              <td>the Bird</td>
                              <td>@twitter</td>
                            </tr>
                          </tbody>
                        </table>
                  </div>
                  <div class="tab-pane fade col-sm-12"  id="dropdown1">
                    <table class="table">
                          <thead>
                            <tr>
                              <th>#</th>
                              <th>First Name3</th>
                              <th>Last Name3</th>
                              <th>Username3</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>1</td>
                              <td>Mark</td>
                              <td>Otto</td>
                              <td>@mdo</td>
                            </tr>
                            <tr>
                              <td>2</td>
                              <td>Jacob</td>
                              <td>Thornton</td>
                              <td>@fat</td>
                            </tr>
                            <tr>
                              <td>3</td>
                              <td>Larry</td>
                              <td>the Bird</td>
                              <td>@twitter</td>
                            </tr>
                          </tbody>
                        </table>
                  </div>
                  <div class="tab-pane fade" id="dropdown2">
                    <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
                  </div>
                </div>
              </div> 
            
              <div class="blog-post">
                <h2 class="blog-post-title">
                
                <button type="button" class=" btn btn-default btn-sm visible-xs visible-sm" data-toggle="offcanvas">
                  <span class="glyphicon glyphicon-list"></span>
                </button>
                Sample blog post</h2>
                <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
    
                <p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
                <hr>
                <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
                <blockquote>
                  <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </blockquote>
                <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
                <h2>Heading</h2>
                <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                <h3>Sub-heading</h3>
                <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                <pre><code>Example code block</code></pre>
                <p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
                <h3>Sub-heading</h3>
                <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                <ul>
                  <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
                  <li>Donec id elit non mi porta gravida at eget metus.</li>
                  <li>Nulla vitae elit libero, a pharetra augue.</li>
                </ul>
                <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
                <ol>
                  <li>Vestibulum id ligula porta felis euismod semper.</li>
                  <li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
                  <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
                </ol>
                <p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
              </div><!-- /.blog-post -->
    
              <div class="blog-post">
                <h2 class="blog-post-title">Another blog post</h2>
                <p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p>
    
                <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
                <blockquote>
                  <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </blockquote>
                <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
                <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
              </div><!-- /.blog-post -->
    
              <div class="blog-post">
                <h2 class="blog-post-title">New feature</h2>
                <p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p>
    
                <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                <ul>
                  <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
                  <li>Donec id elit non mi porta gravida at eget metus.</li>
                  <li>Nulla vitae elit libero, a pharetra augue.</li>
                </ul>
                <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
                <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
              </div><!-- /.blog-post -->
    
              <ul class="pager">
                <li><a href="#">Previous</a></li>
                <li><a href="#">Next</a></li>
              </ul>
              
               <div class="bs-example">
                <table class="table">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>First Name</th>
                      <th>Last Name</th>
                      <th>Username</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>1</td>
                      <td>Mark</td>
                      <td>Otto</td>
                      <td>@mdo</td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>Jacob</td>
                      <td>Thornton</td>
                      <td>@fat</td>
                    </tr>
                    <tr>
                      <td>3</td>
                      <td>Larry</td>
                      <td>the Bird</td>
                      <td>@twitter</td>
                    </tr>
                  </tbody>
                </table>
              </div><!--end table1 -->
              
         
  

        

       </div><!-- /.blog-main -->

      </div><!-- /.row -->

    </div><!-- /.container -->

    <div class="blog-footer">
      <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
      <p>
        <a href="#">Back to top</a>
      </p>
    </div>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../assets/js/docs.min.js"></script>
    <script type="text/javascript">
    $('[data-toggle=offcanvas]').click(function () {
    $('.row-offcanvas').toggleClass('active')
  });
  
    $('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})
    </script>
  </body>
</html>
